<template>
  <div class="ma" style="width:100%;height:100%;position: relative">
  <div class="common-layout">
    <el-container>
      <el-header>
        <common-header />
      </el-header>
      <div class="back"></div>
      <el-container>
        <el-aside width="auto">
          <common-aside></common-aside>
        </el-aside>
        <div class="dmain">
        <el-main class="main">
          <router-view></router-view>
        </el-main>
        </div>
      </el-container>
    </el-container>
  </div>
  </div>
</template>


<script lang="ts">
import view from '../../util/view'
import CommonAside from './CommonAside.vue'
import CommonHeader from "../components/CommonHeader.vue";
import Display from "../display/Display.vue";
import SchoolInfo from "../analysis/SchoolInfo.vue"

export default {
  mixins: [view],
  name: 'main',
  components: {
    CommonAside,
    CommonHeader,
    Display,
    SchoolInfo
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.common-layout{
  overflow:auto;
  position: absolute;
  width: 100vw;
  height: 100vh;

  div::-webkit-scrollbar {
  width: 0;
  display: none;
  }
}

/deep/ .el-main {
  height: 91vh;
  overflow: auto;
  --el-main-padding: 0px;
  div::-webkit-scrollbar {
  width: 0;
  }
}
.dmain{
  height: 91vh;
  overflow: auto;
  width: 85vw;
  div::-webkit-scrollbar {
  width: 0;
  }
}
.el-main{
  height: 91vh;
  width: 85vw;
  overflow: auto;
  --el-main-padding: 0px;
  div::-webkit-scrollbar {
  width: 0;
  }
}
.el-header {
  background-color: #545c64;
  font-size: larger;
  text-align: left;
  line-height: 7.8vh;
  font-weight: bold;
}

.back {
  box-shadow: 2px 2px 5px #000;
  height: 1vh;
  
}

.el-main {
  div::-webkit-scrollbar {
  width: 0;
  }
  padding: 0%;
}
</style>
